<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#ul1{
			background-color: green;
		}
		#ul2{
			background-color: red;
		}
	</style>
	<script type="text/javascript">
	window.onload=function(){
		var ul1 = document.getElementById('ul1');
		var ul2 = document.getElementById('ul2');
        var button = document.getElementById('button');


        button.onclick=function(){
            
        	var li=ul1.children[0];
        	ul1.appendChild(li); 
            //把当前父级的元素appendChild一下。
            //哪也会执行两步，删除 -》 添加
            //也就进入了一个循环状态，不停的删除添把第一个删除加到最后
        };
     };
	</script>
</head>
<body>

   <input type="button" value="移动" id="button" />

	<ul id="ul1">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>

</body>
</html>